<template>
  <van-popup v-model:show="showPopup" position="right" destroy-on-close :style="{ width: '100%', height: '100%' }" teleport="body">
    <van-nav-bar title="产品净值" fixed @click-right="showPopup = false">
      <template #right>
        <van-icon name="cross" size="18" />
      </template>
    </van-nav-bar>
    <div class="search-wrapper">
      <div class="van-search van-search--show-action">
        <div class="van-search__content van-search__content--square">
          <van-field v-model="queryParams.netDate" readonly placeholder="点击选择净值时间" class="search-input" @click="showDatePicker = true">
            <template #left-icon>
              <van-icon name="calendar-o" color="var(--van-search-left-icon-color)" />
            </template>
          </van-field>
          <van-popup v-model:show="showDatePicker" destroy-on-close position="bottom">
            <van-date-picker :model-value="pickerValue" title="选择日期" @confirm="onDatePickerConfirm" @cancel="showDatePicker = false" />
          </van-popup>
        </div>
        <div class="van-search__action" @click="getProductNetList()">
          <div class="search-btn">搜索</div>
        </div>
      </div>
    </div>
    <div ref="NetValueWrapperRef" class="net-value-wrapper">
      <van-empty v-if="productNetList.length === 0" image="search" description="没有搜索到净值信息哦~" />
      <van-cell-group v-else>
        <van-cell v-for="item in productNetList" :key="item.id" title="" @click="editProductNet(item, 'edit')">
          <template #label>
            <div class="item-wrapper">
              <div class="net-value">净值：{{ item.netValue }}</div>
              <div class="net-date">
                <van-tag :type="item.source === 1 ? 'success' : 'primary'">{{ item.source === 1 ? '邮件采集' : '手动添加' }}</van-tag>
                <div>净值日期：{{ item.netDate ? dayjs(item.netDate).format('YYYY-MM-DD') : '' }}</div>
              </div>
            </div>
          </template>
        </van-cell>
        <van-pagination
          v-if="productNetTotal > queryParams.rows"
          v-model="queryParams.page"
          :total-items="productNetTotal"
          :items-per-page="queryParams.rows"
          :show-page-size="5"
          force-ellipses
          @change="getProductNetList"
        />
      </van-cell-group>
      <van-floating-bubble axis="xy" icon="plus" magnetic="x" :teleport="NetValueWrapperRef" @click="editProductNet()" />
    </div>
  </van-popup>

  <EditNetValue ref="EditNetValueRef" @refresh="getProductNetList" />
</template>

<script setup>
import { ref } from 'vue'
import { apiGetProductNetList } from '@/api/productNet'
import dayjs from 'dayjs'
import EditNetValue from './netValueEdit.vue'

const showPopup = ref(false)
const form = ref({})
const showDatePicker = ref(false)
const pickerValue = ref([])
const productNetList = ref([])
const productNetTotal = ref(0)
const EditNetValueRef = ref()
const NetValueWrapperRef = ref()

const queryParams = ref({
  page: 1,
  rows: 10,
  productId: '',
  netDate: ''
})

const open = (product) => {
  form.value = product
  queryParams.value.productId = product.id
  queryParams.value.netDate = ''
  pickerValue.value = [dayjs().get('year'), dayjs().get('month') + 1, dayjs().get('date')]
  getProductNetList()
  showPopup.value = true
}

const onDatePickerConfirm = ({ selectedValues }) => {
  queryParams.value.netDate = selectedValues.join('/')
  pickerValue.value = selectedValues
  showDatePicker.value = false
  getProductNetList()
}

const getProductNetList = async (page = 1) => {
  queryParams.value.page = page
  const params = {
    ...queryParams.value,
    netDate: queryParams.value.netDate ? dayjs(queryParams.value.netDate).format('YYYY-MM-DD') : ''
  }
  apiGetProductNetList(params).then((res) => {
    res.list.forEach((item) => {
      item.symbol = !item.profitLossAmount ? '' : item.profitLossAmount > 0 ? '+' : '-'
    })
    productNetList.value = res.list
    productNetTotal.value = res.total
  })
}

const editProductNet = (netValue = null, type = 'add') => {
  EditNetValueRef.value.open(
    netValue || {
      productId: form.value.id,
      netValue: '',
      netDate: ''
    },
    type
  )
}

defineExpose({
  open
})
</script>

<style lang="less" scoped>
.search-wrapper {
  position: fixed;
  top: var(--van-nav-bar-height);
  left: 0;
  right: 0;
  z-index: 1;
  .search-input {
    background: transparent;
    padding: 5px 10px;
  }
  .search-btn {
    padding-right: 4px;
  }
}
.net-value-wrapper {
  padding-top: 100px;
  height: calc(100vh - 100px);
  overflow-y: auto;
  .bold {
    font-weight: bold;
  }
  .item-wrapper {
    display: flex;
    align-items: center;
    color: #323232;
    .net-value {
      flex: 1;
      font-weight: bold;
    }
    .net-date {
      text-align: right;
    }
  }
}
</style>
